<template>
    <transition
      name="custom-classer-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="modal-ctrl-body" v-show="AddDepartmentModalObj.isShow"
      >
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>新增下级部门信息</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="even-row">

              <div class="modal-row" >
                <div class="modal-form-key f-l indispensable">
                  部门名称：
                </div>
                <input type="text" maxlength="30" placeholder="最长输入30个字符" v-model="ModalData.partName" class="modal-text f-l">
              </div>
              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门手台：
                </div>
                <input type="text" maxlength="16"
                       :onkeyup="ModalData.partRadioId=JPtool.numberVerifyFn(ModalData.partRadioId)"
                       placeholder="最长16位" v-model="ModalData.partRadioId" class="modal-text f-l">
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门电话：
                </div>
                <input type="text" maxlength="11"
                       placeholder="最长11位"
                       :onkeyup="ModalData.partTel=JPtool.phoneVerifyFn(ModalData.partTel)"
                       v-model="ModalData.partTel" class="modal-text f-l input-number"  >
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  部门排序：
                </div>
                <input type="text"
                       maxlength="4"
                       placeholder="最长4位字符"
                       v-model="ModalData.sort"
                       :onkeyup="ModalData.sort=JPtool.numberVerifyFn(ModalData.sort)"
                       class="modal-text f-l input-number">
              </div>
            </div>
          </div>
          <div class="btns text-r">
            <button type="button" class="btn btn-default"  @click="close">取消</button>
            <button type="button" class="btn btn-info" @click="subBtn">确定</button>
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
  export default {
    name: "addDepartmentModal",
    props:["AddDepartmentModalObj"],
    data(){
      return {
        ModalData: {
          partName: '',       // 细分部门名字 ,
          // partAddress: '',    // 细分部门地址 ,
          partParentId: '',   // 细分部门父id ,
          partRadioId: '',    // 细分部门手台 ,
          partTel: '',        // 细分部门电话 ,
          sort: 0,            // 细分部门排序
          // partRemark: '',     // 细分部门备注 ,
          // isDisplay: 0,       // 是否隐藏0是展示，1是影藏 ,
        }
      }
    },
    methods: {
      //关闭弹窗
      close(){
        this.$emit("addDepartmentClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //提交
      subBtn(){
        this.ModalData.partParentId = this.AddDepartmentModalObj.partParentId;
        // 父节点id为点击部门的id
        if(this.verifyForm.isNull(this.ModalData.partName)){
          this.s_alert('请输入细分部门名称！');
          // alert('请输入细分部门名称！');
          return false;
        }
        if( this.verifyForm.isNumber(this.ModalData.sort) ){
          this.s_alert("排序只能为整数！");
          return false;
        }
        if( this.verifyForm.iphone(this.ModalData.partTel) ){
          this.s_alert("电话号码不正确！");
          return false;
        }
        this.$axios.post(baseURL+'api/jp-HCZZ-AdminWeb-app-ms/addressbook/part/add',this.ModalData)
          .then(res => {
            this.s_alert('新增成功');
            // alert('新增成功');
            this.clearData();
            this.close()
          })
          .catch(err => {
            this.s_alert('新增失败');
            // alert('新增失败');
          })
      },
      clearData(){
        this.ModalData = {
          partName: '',       // 细分部门名字 ,
          partAddress: '',    // 细分部门地址 ,
          partParentId: '',   // 细分部门父id ,
          partRadioId: '',    // 细分部门手台 ,
          partTel: '',        // 细分部门电话 ,
          sort: 0,            // 细分部门排序
          partRemark: '',     // 细分部门备注 ,
          // isDisplay: 0       // 是否隐藏0是展示，1是影藏 ,
        }
      }
    }
  }
</script>

<style scoped>
  .input-number {
    width: 60%;
  }
</style>
